<script setup lang="ts">
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  window._AMapSecurityConfig = {
  // 1 密钥要替换成自己
    securityJsCode: "675e59b3ca45bf194eff84d5c1745e32",
  };
  AMapLoader.load({
    // 2 密钥要替换成自己
    key: "f441fd7edb977c3d23ab8b4c32a3ce6b", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 26, // 初始化地图级别
        center: [118.796000, 32.058300], // 初始化地图中心点位置
      });
      AMap.plugin('AMap.Driving', () => {
    const driving = new AMap.Driving({
      map: map, // 指定轨迹显示地图实例
      showTraffic: false // 关闭交通状态
    })
    // 开始位置坐标
    const startLngLat = [116.379028, 39.865042]
    // 结束位置坐标
    const endLngLat = [116.427281, 39.903719]

    driving.search(startLngLat, endLngLat, {
      // 途经点  
      waypoints: [new AMap.LngLat(112.379028, 39.865042), new AMap.LngLat(111.427281, 39.903719)]
    },function (status: string, result: object) {
      // 未出错时，result即是对应的路线规划方案
    })
})
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 800px;
}
</style>
